<template>
    <div class="zx-container">
        <el-form label-width="140px">
            <el-form-item label="我的账号：">
                <div v-if="userForm.gameCode">
                    <span v-if="!isCodeSecrecy">{{userForm.gameCode[0]}}******{{userForm.gameCode[userForm.gameCode.length-1]}}</span>
                    <span v-else>{{userForm.gameCode}}</span>
                    <el-checkbox v-model="isCodeSecrecy" style="margin-left:50px;">显示全部</el-checkbox>
                </div>
            </el-form-item>
            <el-form-item label="我的密码：" prop="password">
                <el-checkbox v-model="isEditPassWord">修改密码</el-checkbox>
                <el-input v-if="isEditPassWord" v-model="passwordText" show-password placeholder="请输入新密码"></el-input>
                <div>此密码仅用于登录网站，不是游戏密码!</div>
            </el-form-item>
            <el-form-item label="游戏名称：">
                <el-input v-model="userForm.gameName" placeholder="游戏名称"></el-input>
            </el-form-item>
            <el-form-item label="QQ：">
                <el-input v-model="userForm.qq" placeholder="QQ号"></el-input>
                <el-checkbox v-model="userForm.isSecrecy">是否保密</el-checkbox>
            </el-form-item>
            <el-form-item label="头像：">
                <div style="width:88px;height:88px;border:50%;border:1px solid #ddd;margin-bottom:10px;">
                    <el-image :src="userForm.image" fit="contain" v-if="userForm.image" style="width:88px;height:88px;" />
                    <el-image src="/game/images/game/zhuxian/userImage.png" v-else />
                </div>
                <vUploadFile @tempFileURL="tempFileURL"></vUploadFile>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { get } from '@/common/app.js'
import md5 from 'js-md5';
import vUploadFile from "@/components/system/upload_file.vue"
export default {
    components: {vUploadFile},
    props:{},
    data() {
        return {
            token: this.$store.state.token,
            isCodeSecrecy: false,
            isEditPassWord: false,
            passwordText: "",
            userForm: {
                gameName: "",
                type: 'qq',
                isSecrecy: false,
                boothAddress: "tt",
                image: "",
            },
        }
    },
    mounted() {
        if(this.token){
            this.getDetail()
        }
    },
    methods: {
        tempFileURL(url){
            this.userForm.image = url
        },
        getDetail(){
            this.userForm = {}
            let params = {
                type: 'getUser',
                api: 'api-user-detail',
                token: this.token,
                data:{},
            }
            get('game', params).then(res => {
                if (res) {
                    this.userForm = res
                }
            })
        },
        submit(){
            if(this.token){
                this.userForm.password = md5(this.passwordText)
                let params = {
                    type: 'getUser',
                    api: 'api-user-edit',
                    data: this.userForm,
                }
                get('game', params).then(res => {
                    if (res) {
                        if(res.requestId){
                            this.$message.success("保存成功！")
                            this.getDetail()
                        }
                    }
                })
            }
        },
        
    },
};
</script>

<style>
</style>